<div class="pb-4">
  <button mat-raised-button color="primary" (click)="addRole()">
    <i class="fa fa-plus-circle"></i> Add Role</button>
</div>

<mat-card class="nb-dashboard-table">
    <mat-table #table [dataSource]="dataSource">
      <ng-container matColumnDef="SN">
        <mat-header-cell class="symbol-no" *matHeaderCellDef> SN </mat-header-cell>
        <mat-cell class="symbol-no" *matCellDef="let element let i=index"> {{i+1}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Role">
        <mat-header-cell *matHeaderCellDef> Role </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.roleName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Read">
        <mat-header-cell class="text-center" *matHeaderCellDef>Read</mat-header-cell>
        <mat-cell class="text-center" *matCellDef="let element">
          <i *ngIf="element.read" class="fa green fa-check" aria-hidden="true"></i>
          <i *ngIf="!element.read" class="fa red fa-times" aria-hidden="true"></i>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Write">
        <mat-header-cell class="text-center" *matHeaderCellDef>Write</mat-header-cell>
        <mat-cell class="text-center" *matCellDef="let element">
          <i *ngIf="element.write" class="fa green fa-check" aria-hidden="true"></i>
          <i *ngIf="!element.write" class="fa red fa-times" aria-hidden="true"></i>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Create">
        <mat-header-cell class="text-center" *matHeaderCellDef>Create</mat-header-cell>
        <mat-cell class="text-center" *matCellDef="let element">
          <i *ngIf="element.create" class="fa green fa-check" aria-hidden="true"></i>
          <i *ngIf="!element.create" class="fa red fa-times" aria-hidden="true"></i>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Change">
        <mat-header-cell class="text-center" *matHeaderCellDef>Change</mat-header-cell>
        <mat-cell class="text-center" *matCellDef="let element">
          <i *ngIf="element.change" class="fa green fa-check" aria-hidden="true"></i>
          <i *ngIf="!element.change" class="fa red fa-times" aria-hidden="true"></i>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Delete">
        <mat-header-cell class="text-center" *matHeaderCellDef>Delete</mat-header-cell>
        <mat-cell class="text-center" *matCellDef="let element">
          <i *ngIf="element.delete" class="fa green fa-check" aria-hidden="true"></i>
          <i *ngIf="!element.delete" class="fa red fa-times" aria-hidden="true"></i>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Active">
        <mat-header-cell class="text-center" *matHeaderCellDef>Active</mat-header-cell>
        <mat-cell class="text-center" *matCellDef="let element">
          <i *ngIf="element.active" class="fa green fa-check" aria-hidden="true"></i>
          <i *ngIf="!element.active" class="fa red fa-times" aria-hidden="true"></i>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Actions">
        <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
        <mat-cell class="nb-icon-cell" *matCellDef="let element">
          <button mat-mini-fab class="material-icon-sm" color="primary" (click)="edit(element._id)">
            <i class="far fa-edit"></i>
          </button>
          <button mat-mini-fab class="material-icon-sm" color="warn" (click)="delete(element._id)">
            <i class="fa fa-trash red-hover"></i>
          </button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <div class="p-3 text-center" *ngIf="objListResponse?.length==0">
      No Records Found
    </div>
</mat-card>
